<template>
  <!-- 登录模块 -->
  <div class="bc_login_box">
    <img src="../../../assets/背景图.png" width="100%" height="100%" />
    <div class="login_box">
      <span style="font-family:'宋体">登录</span>
      <div class="login_box_blue"></div>
      <div class="login_box_orange"></div>
      <!-- 登录表单区域 -->
      <el-form
        ref="loginFormRef"
        :model="loginForm"
        :rules="loginFormRules"
        label-width="0px"
        class="login_Form"
      >
        <!-- 用户名 -->
        <el-form-item prop="account">
          <el-input
            v-model="loginForm.account"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <!-- 验证码 -->
        <!-- <el-form-item prop="" width="50%">
            <el-input placeholder="验证码(例)"></el-input>
          </el-form-item> -->
        <!-- 按钮区域 -->
        <el-form-item class="btns">
          <el-button class="loginbutton" type="primary" @click="login"
            >登 录</el-button
          >
          <!-- <el-button type="info" @click="resetLoginForm">重置</el-button> -->
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import md5 from "js-md5";
export default {
  data() {
    return {
      carouselIMG: [
        require("../../../assets/zucc_01.jpg"),
        require("../../../assets/logo.png"),
      ],
      //登录
      loginForm: {
        // account: "11111111",
        // password: "123456",
        account: "",
        password: "",
      },
      loginFormRules: {
        account: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 50,
            message: "长度在 6 到 50 个字符hhhhhhh",
            trigger: "blur",
          },
        ],
      },
      query: {
        title: "",
        pageNum: 1,
        pageSize: 7,
      },
      // 内容列表
      list: [],
      // 内容总条数
      total: 0,
      // 初始化显示字段
      showColumns: [
        { label: "标题", show: true },
        { label: "内容", show: true },
        { label: "修改时间", show: true },
      ],
      // 是否显示详情
      showDetailVisible: false,
      // 数据详情
      detail: {},
    };
  },
  created() {
    this.getList();
  },
  methods: {
    resetLoginForm() {
      // console.log(this);
      this.$refs.loginFormRef.resetFields();
    },
    login() {
      this.$refs.loginFormRef.validate(async (valid) => {
        // console.log(valid);
        if (!valid) return;
        const { data: res } = await this.$http.post("/v1/api/users/login", {
          account: this.loginForm.account,
          password: md5(this.loginForm.password),
        });
        if (res.msg != "success") return this.$message.error("登录失败");
        // if(res.status != 200) return console.log('登录失败');
        // console.log('登录成功');
        localStorage.setItem("userInfo", JSON.stringify(res.data));
        this.$message.success("登录成功");
        // console.log(res);
        window.sessionStorage.setItem("token", res.data.id);
        this.$router.push({
          name: "Home",
          params: {
            // 后期修改为roleType
            roleType: res.data.roleType,
          },
        });
      });
    },

    tohosthome() {
      this.$router.push("/homepage");
    },
    tonews() {
      this.$router.push("/homenews");
    },
    tolab() {
      this.$router.push("/laboratoryintroduction");
    },
    toresources() {
      this.$router.push("/tocoursewareresources");
    },
    toTeachingresources() {
      this.$router.push("/coursewareresources");
    },
    toteachingachievements() {
      this.$router.push("/teachingachievements");
    },
    opennewsDetails(row) {
      // this.$router.push("/Homenews_detail",row);
      // this.$router.push({ path: '/Homenews_detail', query: { userId: 123 }});
      this.$router.push({ name: "newsdetail", params: { row: row } });
    },
    opennotesDeatils(row) {
      this.$router.push({ name: "notesdetail", params: { row: row } });
    },

    // 获取内容列表
    getList() {
      this.$http.post("/v1/api/newses/page", this.query).then((res) => {
        if (res.data.code == 0) {
          this.list = res.data.data.list;
          this.total = res.data.data.total;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 监听 pageSize 改变的事件
    handleSizeChange(pageSize) {
      this.query.pageSize = pageSize;
      this.getList();
    },
    // 监听 page 改变的事件
    handleCurrentChange(page) {
      this.query.pageNum = page;
      this.getList();
    },
  },
};
</script>

<style lang="less" scoped>
//less 支持less语法格式
//scoped当前组件内生效，去掉全局生效

// 主体功能

.bc_login_box {
  width: 550px;
  height: 400px;
  //   background-color: #c52727;
  border-radius: 2px;
  position: absolute;
  left: 50%;
  top: 400px;
  transform: translate(-50%, -50%);
  > span {
    display: flex;
    padding-top: 15px;
    padding-left: 10px;
    font-size: 18px;
  }
}
// 登录模块
.login_box {
  width: 250px;
  height: 240px;
  background-color: #f9f9f9;
  border-radius: 2px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  > span {
    display: flex;
    padding-top: 15px;
    padding-left: 10px;
    font-size: 18px;
  }
}
.login_box_orange {
  width: 70px;
  height: 3px;
  background-color: #fc6620;
  position: absolute;
  left: 45px;
  top: 45px;
  transform: translate(-50%, -50%);
}
.login_box_blue {
  width: 230px;
  height: 1px;
  background-color: #106ab5;
  position: absolute;
  left: 125px;
  top: 46px;
  transform: translate(-50%, -50%);
}

.login_Form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 10px;
  left: 0px;
  top: 70px;
  box-sizing: border-box;
}
.btns {
  display: flex;
  justify-content: flex-end;
}

.loginbutton {
  width: 230px;
}

/*最外层透明*/
/deep/.el-table,
.el-table__expanded-cell {
  background-color: #f9f9f9;
}
/* 表格内背景颜色 */
/deep/.el-table th,
/deep/.el-table tr,
/deep/.el-table td {
  background-color: #f9f9f9;
}
</style>
